<template>
	<view class="wrap">
		<u-navbar :title="$t('index.system-language')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="nr">
				<view class="list">
					<view class="list_nr_li" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
						<view class="left"><view class="text1">{{item.text}}</view></view>
						<view class="right">
							<text class="icon-check" v-if="item.code == applicationLocale"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		  systemLocale: '',
		  applicationLocale: ''
		}
	},
	computed:{
	  locales() {
	    return [ {
			text: this.$t('locale.zh-hans'),
			code: 'zh-Hans'
	      },
	      {
			  text: this.$t('locale.zh-hant'),
			  code: 'zh-Hant'
	      },
	      {
	        text: this.$t('locale.en'),
	        code: 'en'
	      }
	    ]
	  }
	},
	onLoad() {
	  let systemInfo = uni.getSystemInfoSync();
	  this.systemLocale = systemInfo.language;
	  this.applicationLocale = uni.getLocale();
	  this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
	  uni.onLocaleChange((e) => {
	    this.applicationLocale = e.locale;
	  })
	},
	methods: {
		onLocaleChange(e) {
		  if (this.isAndroid) {
		    uni.showModal({
		      content: this.$t('index.language-change-confirm'),
		      success: (res) => {
		        if (res.confirm) {
		          uni.setLocale(e.code);
		        }
		      }
		    })
		  } else {
		    uni.setLocale(e.code);
		    this.$i18n.locale = e.code;
		  }
		}
	}
};
</script>

<style lang="scss" scoped>
.tom-container {
	padding-top: 50rpx;
	.nr {
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		background-image: url('/static/new_images/showPopup.png');
		background-position: left bottom;
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
	}
}
.list {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.list_nr_li {
		color: $tom-text-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx $nr-padd;
		border-bottom: 2rpx solid $page-bg;
		.left {
			.text1 {
				font-size: 28rpx;
				font-weight: bold;
				.u-icon {
					margin-left: 10rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}
		.right {
			display: flex;
			align-items: center;
			.text1 {
				font-size: 24rpx;
				color: $tom-text-sub-color;
				margin-top: -2rpx;
			}
			.active {
				color: $tom-text-color;
			}
			.active2 {
				color: $text-color;
			}
			.img {
				width: 50rpx;
				height: 50rpx;
				border-radius: 8rpx;
			}
			.u-icon {
				margin-right: -10rpx;
			}
		}
	}
}
.icon-check {
    margin-right: 5px;
    border: 2px solid #007aff;
    border-left: 0;
    border-top: 0;
    height: 12px;
    width: 6px;
    transform-origin: center;
    /* #ifndef APP-NVUE */
    transition: all 0.3s;
    /* #endif */
    transform: rotate(45deg);
  }
</style>
